import { showToast } from 'vant'
import { ref } from 'vue'
import type { FollowType } from '../types/consult'
import { followDoc } from '../services/consult'

// 在项目开发中，有两个功能特别类似，如果单独实现，会有很多重复的代码
// 在v3中，我们利用组合式api的特点，他们抽象出来，进行封装，把得到函数写在一个单独的
// 模块中，导出，以供复用

// 例如：在做xxx项目，有一个“关注”功能，他们调用的api接口是同一个，就是一个
// 参数不同，但是我们有额外的loading功能也集成在里面
// 针对这种情况，我封装了一个自定义的 hook函数，在函数的内部封装请求和loading值的
// 修改，返回这个loading值和调用api函数

// v2和v3的区别
// (1)组合式api(compositionAPI) 和 选项式api
// 选项式api:
// export default {
//    methods, data, computed..
// }

// (2) 闭包
// 组合式api更加有利于： 逻辑复用， v2中使用mixins来做
export const useFollow = (type: FollowType) => {
  const loading = ref(false)
  const follow = async (item: { id: string; likeFlag: number }) => {
    loading.value = true
    await followDoc(item.id, type)
    item.likeFlag = item.likeFlag ? 0 : 1
    showToast('操作成功')
    loading.value = false
  }

  return {
    follow,
    loading
  }
}
